<div class="layui-fluid" id="VIEW-list-table" lay-title="字典数据">
    <div class="layui-row layui-col-space12">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form" action="" lay-filter="form-group">
                        <div class="layui-form-item">
                            <label class="layui-form-label" >字典类型：</label>
                            <div id="dictType">
                            </div>
                            <!--<label class="layui-form-label">角色名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="roleName" lay-verify="required" autocomplete="off"
                                       placeholder="请输入角色名称" class="layui-input">
                            </div>-->
                            <a class="layui-btn search_btn" data-type="getInfo" style="margin-left: 15px;">查询</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body nepadmin-table-full">

                    <div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
                        <div class="layui-btn layui-btn-sm add" >添加数据</div>
                        <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="del">删除</div>
                    </div>
                    <table id="list-table-dictData" lay-filter="list-table-dictData"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['admin', 'view','table', 'form', 'jquery','selectN'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , admin = layui.admin
            , selectN = layui.selectN
            , view = layui.view
            , table = layui.table;

        var router = layui.router();
        var dictType = router.search.dictType;
        var dictId = router.search.dictId;

        var viewList = $('#VIEW-list-table');
        var tableFilter = 'list-table-dictData';
        // 下拉框赋值
        var typeSelect = null;
        admin.get({
            type: 'get',
            url: '/sysDict/list?id='+dictId+'&token='+admin.loginToken,
            dataType: 'json',
            success: function(data){
                var selected = [];
                selected.push(dictType);
                //多选标签-所有配置
                typeSelect = selectN({
                    //元素容器【必填】
                    elem: '#dictType'
                    ,search:[false,true]
                    //候选数据【必填】
                    ,selected: selected
                    ,data: data.list
                    ,last:true
                    ,field:{idName:'dictType',titleName:'name'}
                });
            }
        });

        table.render({
            elem: '[lay-filter="' + tableFilter + '"]',
            url: '/sysDictData/page?token=' + admin.loginToken,
            where: { dictType: dictType},
            height: 'full-165',
            cols: [[
                {title: '', type: 'checkbox', fixed: true, width: 60},
                {title: '字典名称', field: 'name'},
                {title: '字典类型', field: 'dictType'},
                {
                    title: '状态', width: 80, templet: function (d) {
                        var status = {
                            1: {title: '启用', color: 'blue'},
                            0: {title: '禁用', color: 'orange'}
                        }[d.status];
                        return '<span class="layui-badge layui-bg-' + status.color + '">' + status.title + '</span>';
                    }
                },
                {
                    title: '操作时间', field: 'time', align: 'center', minWidth: 250, templet: function (d) {
                        var createTime = layui.util.toDateString(d.createTime, 'yyyy-MM-dd')
                        return '<p><span title="' + d.createTime + '" class="nepadmin-c-gray">' + createTime + '</span></p>';
                    }
                },
                {
                    title: '操作', width: 220, align: 'center', templet: function (d) {
                        var editBtn = '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>';
                        var delBtn = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        return editBtn + delBtn;
                    }
                }
            ]]
        });

        viewList.find('.search_btn').on("click",function(){
            // 查询
            table.reload("list-table-dictData",{
                url: '/sysDictData/page?token=' + admin.loginToken,
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    dictType: typeSelect.values.join(",")
                }
            })
        });

        table.on('tool(' + tableFilter + ')', function (obj) {
            if (obj.event === 'del') {//删除行

            } else if (obj.event === "edit") {
                admin.popup({
                        url: '/sys/dict/sysDictDataEdit',
                        area: ['650px', '450px'],
                        data : {
                            id:obj.data.id,
                            type:dictType,
                            table:table
                        }
                    }
                )
                return false
            }
        });

        viewList.find('.add').on("click", function () {
            id = "";
            type = typeSelect.values;
            if (type == null || type == ""){
                layer.msg('请先选择字典类型');
                return false;
            }
            admin.popup({
                    url: '/sys/dict/sysDictDataEdit',
                    area: ['650px', '450px'],
                    data : {
                        table:table,
                        type:dictType
                    }
                }
            )
            return false
        });

        viewList.find('.table-action').click(function () {
            var checkedCount = table.checkStatus(tableFilter).data.length;
            if (checkedCount == 0) {
                layer.msg('请先选择某行');
            } else {
                layer.msg($(this).html() + checkedCount + '项');
            }
        })

    })
</script>